<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';
import { useCultivation, useSpiritualRoot } from '../../../../composables';
import PageContainer from '../../components/page.vue';
import SpiritualRootUpgrade from './upgrade.vue';
import type { SpiritualRootKey } from '../../../../game/model/spiritual-root';
import { FIVE_ELEMENT } from '../../../../game/constants/five-elements';

const { back } = useCultivation();
const { state: spiritualRootState } = useSpiritualRoot();

const spiritualRootUpgradeRef = useTemplateRef('spiritualRootUpgradeRef');

const currentMetalSpiritualRootInfo = computed(() => {
  return spiritualRootState.value.spiritualRootInfo[FIVE_ELEMENT.METAL];
});

const currentWoodSpiritualRootInfo = computed(() => {
  return spiritualRootState.value.spiritualRootInfo[FIVE_ELEMENT.WOOD];
});

const currentWaterSpiritualRootInfo = computed(() => {
  return spiritualRootState.value.spiritualRootInfo[FIVE_ELEMENT.WATER];
});

const currentFireSpiritualRootInfo = computed(() => {
  return spiritualRootState.value.spiritualRootInfo[FIVE_ELEMENT.FIRE];
});

const currentEarthSpiritualRootInfo = computed(() => {
  return spiritualRootState.value.spiritualRootInfo[FIVE_ELEMENT.EARTH];
});

function onSpiritualRootClick(key: SpiritualRootKey) {
  spiritualRootUpgradeRef.value?.show(key);
}
</script>

<template>
  <page-container title="灵根" :show-back-button="true" @back="back">
    <div class="w-full h-full flex flex-col items-center justify-center">
      <div class="pentagon-container mb-8">
        <div
          class="vertex vertex-1"
          @click="onSpiritualRootClick(FIVE_ELEMENT.METAL)"
        >
          <div>
            <div class="text-[#FFC700]">
              金·{{ currentMetalSpiritualRootInfo.levelName }}
            </div>
            <div class="text-xs text-center">
              {{ currentMetalSpiritualRootInfo.level }} 级
            </div>
          </div>
        </div>
        <div
          class="vertex vertex-2"
          @click="onSpiritualRootClick(FIVE_ELEMENT.WOOD)"
        >
          <div>
            <div class="text-[#3CDB7C]">
              木·{{ currentWoodSpiritualRootInfo.levelName }}
            </div>
            <div class="text-xs text-center">
              {{ currentWoodSpiritualRootInfo.level }} 级
            </div>
          </div>
        </div>
        <div
          class="vertex vertex-3"
          @click="onSpiritualRootClick(FIVE_ELEMENT.WATER)"
        >
          <div>
            <div class="text-[#2A9DFF]">
              水·{{ currentWaterSpiritualRootInfo.levelName }}
            </div>
            <div class="text-xs text-center">
              {{ currentWaterSpiritualRootInfo.level }} 级
            </div>
          </div>
        </div>
        <div
          class="vertex vertex-4"
          @click="onSpiritualRootClick(FIVE_ELEMENT.FIRE)"
        >
          <div>
            <div class="text-[#FF5A34]">
              火·{{ currentFireSpiritualRootInfo.levelName }}
            </div>
            <div class="text-xs text-center">
              {{ currentFireSpiritualRootInfo.level }} 级
            </div>
          </div>
        </div>
        <div
          class="vertex vertex-5"
          @click="onSpiritualRootClick(FIVE_ELEMENT.EARTH)"
        >
          <div>
            <div class="text-[#C18742]">
              土·{{ currentEarthSpiritualRootInfo.levelName }}
            </div>
            <div class="text-xs text-center">
              {{ currentEarthSpiritualRootInfo.level }} 级
            </div>
          </div>
        </div>
      </div>
    </div>
    <spiritual-root-upgrade
      ref="spiritualRootUpgradeRef"
    ></spiritual-root-upgrade>
  </page-container>
</template>

<style scoped>
.pentagon-container {
  position: relative;
  width: 300px;
  height: 300px;
}
.vertex {
  position: absolute;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transform-origin: center;
  top: 50%;
  left: 50%;
  margin-top: -3em;
  margin-left: -3em;
  border: 2px solid #424242;
}
/* 使用CSS变量计算每个顶点的位置 */
.vertex-1 {
  transform: translateY(-120px);
}
.vertex-2 {
  transform: rotate(72deg) translateY(-120px) rotate(-72deg);
}
.vertex-3 {
  transform: rotate(144deg) translateY(-120px) rotate(-144deg);
}
.vertex-4 {
  transform: rotate(216deg) translateY(-120px) rotate(-216deg);
}
.vertex-5 {
  transform: rotate(288deg) translateY(-120px) rotate(-288deg);
}
</style>
